<template>
  <div class="col">
    <div class="row_center pd2">
      <label>夹爪位置:</label>
      <el-input v-model="ctx.gripperPos" class="ml" style="width: 80px;" />
      <label class="ml">夹爪速度:</label>
      <el-input v-model="ctx.gripperSpeed" class="ml" style="width: 80px;" />
      <label class="ml">夹爪力度:</label>
      <el-input v-model="ctx.gripperTor" class="ml" style="width: 80px;" />
      <el-button class="ml" @click="onClickGripper" :loading="ctx.gripperLoading" type="primary">控制夹爪</el-button>
    </div>
    <div class="row_center pd2">
      <label>关节点名称:</label>
      <el-input v-model="ctx.inputName" class="ml" style="width: 200px;" />
      <el-button class="ml" type="primary" @click="onClickSave" :loading="ctx.saveLoading" size="large">保存</el-button>
      <el-button class="ml" type="primary" @click="onClcikGet" :loading="ctx.getLoading" size="large">获取</el-button>
      <el-button class="ml" type="primary" size="large" @click="onClickAddLink">加入联动</el-button>
    </div>
    <div class="row_center">
      <el-button @click="onClickClearLink" type="warning">清空联动</el-button>
      <el-button @click="onClickExecLink" type="primary">执行联动</el-button>
      <label class="ml">联动点信息:</label>
      <label v-for="(item, index) in ctx.linkageList" :key="index" class="ml">{{ item.name }}</label>
    </div>
    <div class="row pd" style="flex-wrap: wrap;">
      <PosItemView class="ml mt" style="height: 105px;" :on-move-j="onClickMoveJ" :on-move-l="onClcikMoveL"
        :on-delete="onClcikDelete" v-for="(item, index) in ctx.posList" :key="index" :pos="item" />
    </div>

  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { dialog } from '../utils/dialog';
import { NamedPos, Pos } from '../robot/model';
import store from '../robot/store';
import PosItemView from '../components/PosItemView.vue';
import service from '../robot/service';


interface Ctx {
  saveLoading: boolean,
  getLoading: boolean,
  inputName: string,
  posList: NamedPos[],
  gripperPos: string,
  gripperSpeed: string,
  gripperTor: string,
  gripperLoading: boolean,
  linkageList: NamedPos[],
}


const ctx = reactive<Ctx>({
  saveLoading: false,
  getLoading: false,
  inputName: '',
  posList: [],
  gripperPos: '100',
  gripperSpeed: '100',
  gripperTor: '100',
  gripperLoading: false,
  linkageList: []
});

async function onClcikGet() {
  try {
    ctx.getLoading = true;
    ctx.posList = await store.getNamedPos();
  } catch (msg) {
    dialog.err(msg);
  } finally {
    ctx.getLoading = false;
  }
}

async function onClickSave() {
  try {
    ctx.saveLoading = true;
    if (ctx.inputName.length == 0) {
      dialog.err('请输入关节点名称');
      return;
    }

    let pos = new Pos();
    let namedPos: NamedPos = {
      jt: pos.jt,
      tl: pos.tl,
      name: ctx.inputName,
    }
    await store.saveNamedPos(namedPos);
    await onClcikGet();
  } catch (msg) {
    dialog.err(msg);
  } finally {
    ctx.saveLoading = false;
  }
}

async function onClickMoveJ(pos: NamedPos) {
  try {
    ctx.inputName = pos.name;
    await service.moveJ(pos);
  } catch (msg) {
    dialog.err(msg);
  }
}

async function onClcikMoveL(pos: NamedPos) {
  try {
    ctx.inputName = pos.name;
    await service.moveL(pos);
  } catch (msg) {
    dialog.err(msg);
  }
}

async function onClcikDelete(pos: NamedPos) {
  try {
    await store.delNamedPos(pos.name);
    await onClcikGet();
  } catch (msg) {
    dialog.err(msg);
  }
}

async function onClickGripper() {
  try {
    ctx.gripperLoading = true;
    const pos = parseInt(ctx.gripperPos);
    const speed = parseInt(ctx.gripperSpeed);
    const tor = parseInt(ctx.gripperTor);
    await service.moveGripper(pos, speed, tor)
  } catch (msg) {
    dialog.err(msg);
  } finally {
    ctx.gripperLoading = false;
  }
}

function onClickClearLink() {
  ctx.linkageList = [];
}

async function onClickExecLink() {
  try {
    await service.moveJs(ctx.linkageList);
  } catch (msg) {
    dialog.err(msg);
  }
}

function onClickAddLink() {
  if (ctx.inputName.length == 0) {
    dialog.err('请输入点名称');
    return;
  }
  const p = new Pos();
  const pos: NamedPos = {
    name: ctx.inputName,
    jt: p.jt,
    tl: p.tl,
  };
  ctx.linkageList.push(pos);

}

onClcikGet();

</script>
